<template>
  <div class="startTagSelectUser">

    <el-tag :size="tagSize" v-for="(user,index) in selectUserList" :closable="showDelBtn"
            @close="deleteUserEvent(index)" type="primary" effect="plain"> {{
        user[userProps.label] || '未知用户[' + user[userProps.value] + ']'
      }}
    </el-tag>

    <el-tag type="primary" v-if="showAddBtn" effect="dark"
            @click="$refs.sysUserSelectUserDialog.show(selectDialogTitle)">{{ addBtnText }}
    </el-tag>
    <sys-user-select-dialog ref="sysUserSelectUserDialog" @submit="confirmSelectUser"></sys-user-select-dialog>

  </div>
</template>
<script>
import {deepClone} from "utils/util";
import startCommonUserApi from "components/start-components/startSelectUser/startCommonUserApi";
import SysUserSelectDialog from "components/start-components/startSelectUser/sysUserSelectDialog.vue";
import startArrayTools from "@/mixins/startArrayTools";
import startPropTools from "@/mixins/startPropTools";


const defaultProps = {
  label: "nickName",
  value: "id",
  userType: "userType"
}
export default {
  name: "startTagSelectUser",
  components: {SysUserSelectDialog},


  props: {
    props: {
      type: Array,
      default: () => {
        return defaultProps
      }
    },
    modelValue: {},
    multiple: {
      type: Boolean,
      default: false
    },
    limit: {
      type: Number,
      default: 1
    },
    disabled: {
      type: Boolean,
      default: false
    },
    addBtn: {
      type: Boolean,
      default: true,
    },
    addBtnText: {
      type: String,
      default: "添加"
    },
    selectDialogTitle: {
      type: String,
      default: "请选择用户数"
    },
    delBtn: {
      type: Boolean,
      default: true,
    },
    tagSize: {
      type: String,
      default: "small"
    }
  },
  watch: {
    modelValue: {
      deep: true,
      immediate: false,
      handler: function (val) {
        this.loadSelectUsers();
      },
    }
  },
  computed: {
    showDelBtn() {
      if (this.disabled) {
        return false;
      }
      return this.delBtn;
    },
    showAddBtn() {
      if (this.disabled) {
        return false;
      }
      if (!this.addBtn) {
        return false;
      }
      if (!this.multiple && this.selectUserList.length > 1) {
        return false;
      }
      return this.selectUserList.length < this.limit;
    },
    userProps() {
      let userProps = deepClone(this.props || defaultProps)
      userProps = Object.assign({}, defaultProps, userProps)
      return userProps;
    },
  },
  data() {
    return {
      selectUserList: [],
      cacheUsers: {},
    }
  },
  created() {
  },
  methods: {
    loadSelectUsers() {
      this.selectUserList = []
      if (!this.modelValue) {
        return
      }
      let users = deepClone(this.modelValue);
      if (!Array.isArray(users)) {
        users = [users]
      }
      let userKey;
      let selectUserList = []
      let loadSelectUsers = [];
      for (let user of users) {
        userKey = this.getUserKey(user);
        if (!this.cacheUsers[userKey]) {
          loadSelectUsers.push(user)
          continue
        }
        selectUserList.push(this.cacheUsers[userKey])
      }
      this.selectUserList = selectUserList
      if (loadSelectUsers.length < 1) {
        return;
      }
      startCommonUserApi.getUsers(loadSelectUsers).then(res => {
        let data = res.data.data || []
        this.syncUserProps(data)
        let userKey;
        for (const user of data) {
          userKey = this.getUserKey(user);
          if (!this.cacheUsers[userKey]) {
            this.cacheUsers[userKey] = user
          }
        }
        this.selectUserList = this.selectUserList.concat(data)
      })

    },
    confirmSelectUser(users, done) {
      if (!users || users.length === 0) {
        done();
        return
      }
      this.syncUserProps(users)
      let tempUsers = deepClone(this.selectUserList);
      tempUsers = tempUsers.concat(users);
      tempUsers = startArrayTools.distinct(tempUsers, this.getUserKey)
      let userKey;
      for (const tempUser of tempUsers) {
        userKey = this.getUserKey(tempUser)
        if (this.cacheUsers[userKey]) {
          continue
        }
        this.cacheUsers[userKey] = tempUser;
      }
      if (tempUsers.length < 2) {//单选情况
        this.triggerInputEvent(tempUsers, done)
        return;
      }
      if (!this.multiple) {
        this.$message.error("只能选择1个用户")
        return;
      }
      if (tempUsers.length > this.limit) {
        this.$message.error("最多只能选择" + this.limit + "个用户");
        return;
      }
      this.triggerInputEvent(tempUsers, done)

    },
    getUserKey(user) {
      return user[this.userProps.userType] + ":" + user[this.userProps.value]
    },
    syncUserProps(users) {
      for (const user of users) {
        startPropTools.objPropMappingValue(user, this.userProps.label, defaultProps.label)
        startPropTools.objPropMappingValue(user, this.userProps.value, defaultProps.value)
        startPropTools.objPropMappingValue(user, this.userProps.userType, defaultProps.userType)
      }

    },
    deleteUserEvent(index) {
      this.selectUserList.splice(index, 1);
      this.triggerInputEvent(this.selectUserList);
    },
    triggerInputEvent(users, done) {
      this.$emit("update:modelValue", users)
      if (done) {
        done()
      }
    }

  }
}

</script>
<style scoped lang="scss">
.startTagSelectUser {
  .el-tag {
    margin-left: 10px;
  }
}
</style>